<template>
  <div>
    <ul class="list">
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" class="checkBox" :checked="item.isCheck" @change="changeStatus(item.id)">
        <p>{{item.title}}</p>
        <button @click="delItem(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  setup (props, context) {
    const store = useStore()
    const changeStatus = (id) => {
      store.commit('changeStatus', { id })
    }
    const delItem = (id) => {
      store.commit('delItem', { id })
    }

    return {
      changeStatus,
      delItem
    }
  }
})
</script>

<style scoped>
  .list {
    list-style: none;
  }
  .list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 50px;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #ffffff;
  }
</style>
